@50arms/ui 0.0.0-stage → 35.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dan Newman
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,194 @@
-# Temporary Holding Version
+# @50arms/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A React design system with motion as a foundation, not a finish pass.
+
+```bash
+npm install @50arms/ui
+```
+
+```tsx
+import { Button, Chat, ThemeMenu } from "@50arms/ui";
+```
+
+```css
+/* your app's Tailwind entry — see Setup, all three lines are required */
+@import "tailwindcss";
+@import "@50arms/ui/theme.css";
+@import "@50arms/ui/styles.css";
+```
+
+Requires React 19 and Tailwind CSS 4 **in the consuming build** — the package
+ships no compiled utilities, on purpose. MIT licensed.
+
+## What is in it
+
+102 components across forms, overlays, structure, data, layout and chat.
+
+**Forms** — Field, FieldSet, Input, Textarea, Checkbox, Switch, Radio, RadioCard,
+Select, Combobox, MultiCombobox, Slider, NumberInput, OTPInput, FileUpload,
+DatePicker, Toggle, ToggleGroup, Toolbar
+
+**Overlays** — Dialog, AlertDialog, Popover, Tooltip, Toast, Menu, CommandPalette
+
+**Structure** — Card, Tabs, Accordion, Breadcrumb, Pagination, AppShell,
+Separator, ScrollArea, Collapsible, PanelGroup
+
+**Display** — Avatar, Progress, Meter, ProgressRing, Stat, Sparkline, Timeline,
+Tree, EmptyState, Badge, Icon, Spinner, Skeleton, LoadingOverlay
+
+**Data** — DataTable
+
+**Chat** — Chat, Message, MessageScroller, Composer, Markdown, CodeBlock,
+ToolCall, Attachment, ModelSelector, EffortControl, ContextMeter
+
+## The parts worth knowing about
+
+### Motion is a layer, not a decoration
+
+Four spring curves are baked as CSS `linear()` easings. A spring curve encodes
+its damping ratio — its *shape* — and nothing else, so duration stays a free
+parameter and one curve is correct at any speed. There is no JavaScript
+animation runtime; the equivalent costs 35–40 KB to do what these do for free.
+
+Reduced motion **reduces**. The usual `animation-duration: 0.01ms !important`
+sweep is wrong twice over: the spec asks for motion removed, reduced *or
+replaced*, and `!important` makes the decision unoverridable. Instead
+`--motion-scale` halves durations and `--motion-travel` zeroes distances, so
+components inherit the preference without knowing it exists.
+
+### Both themes come from one contract
+
+Colour is a three-tier OKLCH system — primitives, semantic tokens, component
+tokens — and both themes are written against the same semantic names. Dark
+accents are hand-tuned at roughly 20% reduced chroma, because a large saturated
+fill on a dark surface reads as glare rather than emphasis.
+
+### Accessibility is a floor you can opt into
+
+Contrast compliance is a switch (`data-contrast="aa"`), not a permanent state.
+Forcing AA everywhere flattens hierarchy: de-emphasised text stops being
+de-emphasised. The default is the palette as drawn; the AA overlay is one
+attribute away and honours `prefers-contrast: more` on first load.
+
+### Size is a multiplier, not a breakpoint
+
+`data-ui-scale` sets a unitless multiplier over `rem`, which composes with the
+reader's own browser font size instead of overriding it. It moves type, spacing,
+control heights and icon sizes together, with hard floors so a tap target never
+drops below 24px.
+
+### Chat messages are typed parts
+
+A message is a list of parts — text, code, reasoning, tool call, file, or a
+named application component — never a blob of markdown. An assistant turn
+routinely interleaves prose, a tool call and a confirmation button, and each is
+a different rendering problem. Applications register their own components by
+name, so a message can carry working UI:
+
+```tsx
+<Chat
+  messages={messages}
+  components={{
+    approval: (props, ctx) => (
+      <ApprovalCard {...props} onApprove={ctx.app.approve} />
+    ),
+  }}
+  appContext={{ approve }}
+/>
+```
+
+Props are plain data and components are addressed by name, so a transcript stays
+serialisable — a component reference in the message would make it impossible to
+persist or replay.
+
+### The library names its own richer alternatives
+
+`COMPONENT_GUIDANCE` (exported from the package root) is a data table, not a
+doc page: for each basic primitive — and each native-HTML/ARIA shape this
+library replaces outright — it names the richer component that usually fits
+better and why (`Textarea` → `InlineMarkdownEdit`/`MarkdownEditor` for prose,
+a `<pre>` → `Markdown`, a ghost text `Button` → `IconButton`, and so on). A
+consuming repo's own source scan reads this table instead of hard-coding the
+same list, so a new richer component added here extends every consumer's
+enforcement with no edit on their side. The rule of thumb it encodes: for
+each piece of data, use the most capable component that fits it, with inline
+editing in place as the default interaction — a plainer primitive is
+sometimes still correct, and that is what a consumer's own escape-hatch
+comment is for, not a reason to leave the table incomplete.
+
+## Setup
+
+Two stylesheets, and you want both. In your application's Tailwind entry:
+
+```css
+@import "tailwindcss";
+@import "@50arms/ui/theme.css";   /* @source + the @theme bridge */
+@import "@50arms/ui/styles.css";  /* the token values, base layer and component CSS */
+```
+
+That is the whole contract. There is no layer-order statement to remember and
+no path to configure.
+
+**Your Tailwind build compiles this library's utilities, not ours.**
+`theme.css` carries `@source "./**/*.js"`, which points your compiler at the
+shipped modules; the package itself ships zero generated utilities. That is
+deliberate and it is the fix for a real defect: a compiled stylesheet emits into
+`@layer utilities`, which is *the same layer name your build uses*, at equal
+specificity, imported last — so the library used to win every tie. Measured in a
+consuming app at 1440px, `grid grid-cols-1 xl:grid-cols-[1.6fr_1fr]` rendered
+one column and `md:grid-cols-2 xl:grid-cols-3` rendered two. Nothing was
+misused; `xl:` is supposed to beat `md:` because Tailwind *sorts* breakpoints,
+and that guarantee only holds inside one compiler's output. So there is one
+compiler.
+
+`theme.css` also carries the `@theme` bridge, extracted from source at build
+time, mapping every semantic token onto Tailwind's namespaces — without it your
+own `bg-accent-subtle` compiles to nothing, silently. **Order matters**:
+`styles.css` comes after, because it supplies the values the bridge points at.
+
+**Not using Tailwind 4?** Then this package will not style anything: you get the
+tokens, the base layer and the hand-written component CSS, and no utilities at
+all. Components render structurally correct and visually unstyled — loudly, on
+the first screen, rather than as one breakpoint quietly misbehaving. Tailwind 4
+in the consuming build is a requirement, not a recommendation.
+
+Fonts are self-hosted woff2 subsets rather than CDN-loaded, because a blocked
+CDN renders every design in a system font with no error anywhere. They are
+pulled in by `styles.css`; `@50arms/ui/fonts.css` exposes the `@font-face`
+rules on their own if you need them separately.
+
+Preferences are read from `<html>` attributes so plain CSS and portalled content
+both see them:
+
+```tsx
+import { useTheme, useUiScale, useContrast, useMotionPreference } from "@50arms/ui";
+```
+
+`ThemeMenu` bundles all four into one popover.
+
+## Browser support
+
+Modern evergreen browsers — Chrome, Safari, Firefox and modern mobile. That
+choice is what makes `@property`, `@starting-style`, container queries,
+`field-sizing` and OKLCH available without fallbacks.
+
+## Running the tests
+
+The vitest suite runs in one place: a Linux Docker container built from `Dockerfile.test`. `npm test` builds the image (cached until `package-lock.json` changes), streams this checkout's git-visible files into a container, runs vitest there and removes the container. Nothing from this machine is mounted and no `node_modules` is shared.
+
+```
+npm test                                # the whole suite
+npm test -- src/__tests__/board.test.tsx   # named files
+npm run test:dist                       # the whole suite with the built dist/ copied in (what `verify` and `release` run)
+npm run probe:slider                    # the slider browser probe against the built demo (needs `npm run build:demo`), same container
+node scripts/test-in-container.mjs --script probe-scale audit-hover a11y-scan   # any browser probe, audit or screenshot script, in order, in one container
+npm run probe                           # every browser probe (needs `npm run build:lib` and `npm run build:demo`)
+npm run audit                           # every audit
+npm run visual                          # the Playwright visual suite, in the Playwright container (`visual:update` re-records baselines)
+```
+
+A `vitest` run anywhere else (a Windows checkout, a bare WSL shell) refuses before any test runs and names this command. So does every browser probe, audit and screenshot script (`scripts/probe-*.mjs`, `scripts/audit-*.mjs`, `a11y-scan`, `shoot*`), and a bare `playwright test` refuses outside the Playwright container. Nothing runs in CI: there is no workflow.
+
+## Licence
+
+MIT

package/dist/components/Accordion.js

@@ -0,0 +1,68 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { Accordion as t } from "@base-ui/react/accordion";
+import { cn as r } from "../lib/cn.js";
+import { Icon as d } from "./Icon.js";
+function x({ className: a, children: o, ref: n, ...s }) {
+  return /* @__PURE__ */ e(
+    t.Root,
+    {
+      ref: n,
+      multiple: !0,
+      className: r("flex min-w-0 flex-col", a),
+      ...s,
+      children: o
+    }
+  );
+}
+function f({ title: a, meta: o, className: n, children: s, ref: l, ...c }) {
+  return /* @__PURE__ */ i(
+    t.Item,
+    {
+      ref: l,
+      className: r("border-b border-border-subtle last:border-b-0", n),
+      ...c,
+      children: [
+        /* @__PURE__ */ e(t.Header, { children: /* @__PURE__ */ i(
+          t.Trigger,
+          {
+            className: r(
+              "group/trigger flex w-full cursor-pointer items-center gap-3 py-4 text-left",
+              "font-medium text-primary outline-none",
+              "transition-colors duration-(--dur-fast) ease-hover",
+              "hover:text-accent-text"
+            ),
+            children: [
+              /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 text-sm", children: a }),
+              o,
+              /* @__PURE__ */ e(
+                d,
+                {
+                  name: "chevron-down",
+                  size: "sm",
+                  className: "shrink-0 text-tertiary transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-base) ease-snappy group-data-panel-open/trigger:rotate-180"
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          t.Panel,
+          {
+            className: r(
+              "overflow-hidden text-sm text-secondary",
+              "h-(--accordion-panel-height) transition-[var(--tx-colors),height,opacity] duration-(--dur-slow) ease-emphasis",
+              "data-starting-style:h-0 data-starting-style:opacity-0",
+              "data-ending-style:h-0 data-ending-style:opacity-0 data-ending-style:duration-(--dur-exit-slow)"
+            ),
+            children: /* @__PURE__ */ e("div", { className: "pb-4", children: s })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  x as Accordion,
+  f as AccordionItem
+};
+//# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../src/components/Accordion.tsx"],"sourcesContent":["import type { ReactNode, Ref } from \"react\";\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport { cn } from \"../lib/cn\";\nimport { Icon } from \"./Icon\";\n\n/* ----------------------------------------------------------------------------\n   ACCORDION\n\n   HEIGHT ANIMATION WITHOUT MEASURING ANYTHING. Base UI publishes the panel's\n   natural height as `--accordion-panel-height`, so opening is a transition\n   from 0 to that variable. Every hand-rolled accordion instead measures\n   `scrollHeight` in an effect, which forces a synchronous layout on every\n   toggle and lands one frame late — the reason so many of them stutter on the\n   first open.\n\n   The chevron ROTATES rather than swapping to a minus. One object turning\n   reads as the same control changing state; two glyphs swapping reads as a\n   flicker at this size.\n\n   `multiple` defaults to TRUE, unlike most implementations. Collapsing\n   someone's open section because they opened another one is only correct when\n   the sections genuinely conflict, which is rare — and when it is right, it\n   is one prop away.\n   -------------------------------------------------------------------------- */\n\nexport interface AccordionProps extends Omit<BaseAccordion.Root.Props, \"className\"> {\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Accordion({ className, children, ref, ...props }: AccordionProps) {\n  return (\n    <BaseAccordion.Root\n      ref={ref}\n      multiple\n      className={cn(\"flex min-w-0 flex-col\", className)}\n      {...props}\n    >\n      {children}\n    </BaseAccordion.Root>\n  );\n}\n\nexport interface AccordionItemProps extends Omit<BaseAccordion.Item.Props, \"className\" | \"title\"> {\n  title: ReactNode;\n  /** Sits at the trailing edge of the header, before the chevron. */\n  meta?: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function AccordionItem({ title, meta, className, children, ref, ...props }: AccordionItemProps) {\n  return (\n    <BaseAccordion.Item\n      ref={ref}\n      className={cn(\"border-b border-border-subtle last:border-b-0\", className)}\n      {...props}\n    >\n      <BaseAccordion.Header>\n        <BaseAccordion.Trigger\n          className={cn(\n            \"group/trigger flex w-full cursor-pointer items-center gap-3 py-4 text-left\",\n            \"font-medium text-primary outline-none\",\n            \"transition-colors duration-(--dur-fast) ease-hover\",\n            \"hover:text-accent-text\",\n          )}\n        >\n          <span className=\"min-w-0 flex-1 text-sm\">{title}</span>\n          {meta}\n          <Icon\n            name=\"chevron-down\"\n            size=\"sm\"\n            className=\"shrink-0 text-tertiary transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-base) ease-snappy group-data-panel-open/trigger:rotate-180\"\n          />\n        </BaseAccordion.Trigger>\n      </BaseAccordion.Header>\n\n      <BaseAccordion.Panel\n        className={cn(\n          \"overflow-hidden text-sm text-secondary\",\n          \"h-(--accordion-panel-height) transition-[var(--tx-colors),height,opacity] duration-(--dur-slow) ease-emphasis\",\n          \"data-starting-style:h-0 data-starting-style:opacity-0\",\n          \"data-ending-style:h-0 data-ending-style:opacity-0 data-ending-style:duration-(--dur-exit-slow)\",\n        )}\n      >\n        {/* Padding lives on an inner element. On the panel itself it would be\n            part of the animated height, so the content would appear to squash\n            against its own edges as the panel closes. */}\n        <div className=\"pb-4\">{children}</div>\n      </BaseAccordion.Panel>\n    </BaseAccordion.Item>\n  );\n}\n"],"names":["Accordion","className","children","ref","props","jsx","BaseAccordion","cn","AccordionItem","title","meta","jsxs","Icon"],"mappings":";;;;AA8BO,SAASA,EAAU,EAAE,WAAAC,GAAW,UAAAC,GAAU,KAAAC,GAAK,GAAGC,KAAyB;AAChF,SACE,gBAAAC;AAAA,IAACC,EAAc;AAAA,IAAd;AAAA,MACC,KAAAH;AAAA,MACA,UAAQ;AAAA,MACR,WAAWI,EAAG,yBAAyBN,CAAS;AAAA,MAC/C,GAAGG;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;AAUO,SAASM,EAAc,EAAE,OAAAC,GAAO,MAAAC,GAAM,WAAAT,GAAW,UAAAC,GAAU,KAAAC,GAAK,GAAGC,KAA6B;AACrG,SACE,gBAAAO;AAAA,IAACL,EAAc;AAAA,IAAd;AAAA,MACC,KAAAH;AAAA,MACA,WAAWI,EAAG,iDAAiDN,CAAS;AAAA,MACvE,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAC,EAACC,EAAc,QAAd,EACC,UAAA,gBAAAK;AAAA,UAACL,EAAc;AAAA,UAAd;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAA;AAAA,cAAA,gBAAAF,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAI,GAAM;AAAA,cAC/CC;AAAA,cACD,gBAAAL;AAAA,gBAACO;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACZ;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QAEA,gBAAAP;AAAA,UAACC,EAAc;AAAA,UAAd;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,YAMF,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,QAAQ,UAAAH,EAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MAClC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/AgentWorkingSpinner.js

@@ -0,0 +1,46 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { cn as t } from "../lib/cn.js";
+const s = {
+  xs: "var(--icon-xs)",
+  sm: "var(--icon-sm)",
+  md: "var(--icon-md)",
+  lg: "var(--icon-lg)",
+  xl: "var(--icon-xl)"
+};
+function g({
+  size: n = "md",
+  label: i,
+  className: c,
+  style: o,
+  ref: e,
+  ...a
+}) {
+  return /* @__PURE__ */ l(
+    "svg",
+    {
+      ref: e,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      className: t("dx-icon dx-agent-working shrink-0", c),
+      style: { "--dx-icon-size": s[n], ...o },
+      ...i ? { role: "status", "aria-label": i } : { "aria-hidden": !0 },
+      ...a,
+      children: [
+        /* @__PURE__ */ r(
+          "path",
+          {
+            className: "dx-agent-spark",
+            fill: "currentColor",
+            d: "M12 5.5c.6 3.9 2.6 5.9 6.5 6.5-3.9.6-5.9 2.6-6.5 6.5-.6-3.9-2.6-5.9-6.5-6.5 3.9-.6 5.9-2.6 6.5-6.5Z"
+          }
+        ),
+        /* @__PURE__ */ r("g", { className: "dx-agent-orbit dx-agent-orbit-a", children: /* @__PURE__ */ r("circle", { cx: "12", cy: "2.6", r: "1.4", fill: "currentColor" }) }),
+        /* @__PURE__ */ r("g", { className: "dx-agent-orbit dx-agent-orbit-b", children: /* @__PURE__ */ r("circle", { cx: "12", cy: "21.4", r: "1", fill: "currentColor", opacity: "0.65" }) })
+      ]
+    }
+  );
+}
+export {
+  g as AgentWorkingSpinner
+};
+//# sourceMappingURL=AgentWorkingSpinner.js.map

package/dist/components/AgentWorkingSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentWorkingSpinner.js","sources":["../../src/components/AgentWorkingSpinner.tsx"],"sourcesContent":["import type { CSSProperties, Ref, SVGProps } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport type { IconSize } from \"./Icon\";\n\nexport interface AgentWorkingSpinnerProps extends Omit<SVGProps<SVGSVGElement>, \"ref\"> {\n  size?: IconSize;\n  /**\n   * An accessible name (\"Agent working\"). Given: `role=\"status\"` + `aria-label`.\n   * Omitted: `aria-hidden`, for the usual case of sitting inside something that\n   * already announces its own busy state.\n   */\n  label?: string;\n  ref?: Ref<SVGSVGElement>;\n}\n\nconst SIZE_VAR: Record<IconSize, string> = {\n  xs: \"var(--icon-xs)\",\n  sm: \"var(--icon-sm)\",\n  md: \"var(--icon-md)\",\n  lg: \"var(--icon-lg)\",\n  xl: \"var(--icon-xl)\",\n};\n\n/**\n * \"An AI agent is working on this.\" A four-point sparkle that gently pulses,\n * with two small dots orbiting it at different rates (so the motion never\n * settles into a predictable loop). Deliberately NOT an arc: the generic\n * `Spinner` means \"waiting\"; this means \"something is thinking and acting\".\n *\n * Pure SVG + CSS keyframes (`dx-agent-*` in motion.css); colour is\n * `currentColor`. Under reduced motion it renders as a static sparkle with the\n * dots parked at rest.\n */\nexport function AgentWorkingSpinner({\n  size = \"md\",\n  label,\n  className,\n  style,\n  ref,\n  ...props\n}: AgentWorkingSpinnerProps) {\n  return (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      className={cn(\"dx-icon dx-agent-working shrink-0\", className)}\n      style={{ \"--dx-icon-size\": SIZE_VAR[size], ...style } as CSSProperties}\n      {...(label ? { role: \"status\", \"aria-label\": label } : { \"aria-hidden\": true })}\n      {...props}\n    >\n      {/* Concave four-point star, centred on 12,12. */}\n      <path\n        className=\"dx-agent-spark\"\n        fill=\"currentColor\"\n        d=\"M12 5.5c.6 3.9 2.6 5.9 6.5 6.5-3.9.6-5.9 2.6-6.5 6.5-.6-3.9-2.6-5.9-6.5-6.5 3.9-.6 5.9-2.6 6.5-6.5Z\"\n      />\n      {/* Each orbit group rotates about the centre; the dot sits on its rim. */}\n      <g className=\"dx-agent-orbit dx-agent-orbit-a\">\n        <circle cx=\"12\" cy=\"2.6\" r=\"1.4\" fill=\"currentColor\" />\n      </g>\n      <g className=\"dx-agent-orbit dx-agent-orbit-b\">\n        <circle cx=\"12\" cy=\"21.4\" r=\"1\" fill=\"currentColor\" opacity=\"0.65\" />\n      </g>\n    </svg>\n  );\n}\n"],"names":["SIZE_VAR","AgentWorkingSpinner","size","label","className","style","ref","props","jsxs","cn","jsx"],"mappings":";;AAeA,MAAMA,IAAqC;AAAA,EACzC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAYO,SAASC,EAAoB;AAAA,EAClC,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,GAA6B;AAC3B,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAWG,EAAG,qCAAqCL,CAAS;AAAA,MAC5D,OAAO,EAAE,kBAAkBJ,EAASE,CAAI,GAAG,GAAGG,EAAA;AAAA,MAC7C,GAAIF,IAAQ,EAAE,MAAM,UAAU,cAAcA,EAAA,IAAU,EAAE,eAAe,GAAA;AAAA,MACvE,GAAGI;AAAA,MAGJ,UAAA;AAAA,QAAA,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJ,gBAAAA,EAAC,KAAA,EAAE,WAAU,mCACX,4BAAC,UAAA,EAAO,IAAG,MAAK,IAAG,OAAM,GAAE,OAAM,MAAK,gBAAe,GACvD;AAAA,0BACC,KAAA,EAAE,WAAU,mCACX,UAAA,gBAAAA,EAAC,YAAO,IAAG,MAAK,IAAG,QAAO,GAAE,KAAI,MAAK,gBAAe,SAAQ,QAAO,EAAA,CACrE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/AppShell.js

@@ -0,0 +1,228 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useRef as k, useEffect as D, useState as S, useLayoutEffect as I } from "react";
+import { Dialog as t } from "@base-ui/react/dialog";
+import { cn as a } from "../lib/cn.js";
+import { usePersistedState as L } from "../lib/persist.js";
+import { Icon as p } from "./Icon.js";
+import { IconButton as u } from "./IconButton.js";
+import { overlayBackdropClassName as U } from "./overlay-shell.js";
+import { NavSections as V } from "./nav-sections.js";
+import { HeaderWidthContext as q } from "../lib/header-fold.js";
+import { useUiStrings as G } from "../lib/i18n/provider.js";
+const J = (n) => typeof n == "boolean";
+function ae({
+  brand: n,
+  brandCollapsed: d,
+  sections: m,
+  activeId: f,
+  sidebarFooter: o,
+  header: C,
+  contentLandmark: T = "main",
+  navLabel: j,
+  scroll: R = "content",
+  scrollResetKey: v,
+  persistId: b = "app-shell-sidebar",
+  children: B,
+  className: O
+}) {
+  const i = G().appShell, x = j ?? i.mainNavigation, P = T === "main" ? "main" : "div", s = R === "content", [l, W] = L(
+    b === !1 ? void 0 : b,
+    !1,
+    { isValid: J }
+  ), g = k(null);
+  D(() => {
+    v !== void 0 && g.current?.scrollTo({ top: 0, behavior: "instant" });
+  }, [v]);
+  const [E, h] = S(!1), N = k(null), [H, M] = S(0);
+  I(() => {
+    const c = N.current;
+    if (!c) return;
+    const w = () => M(Math.round(c.getBoundingClientRect().width));
+    w();
+    const y = new ResizeObserver(w);
+    return y.observe(c), () => y.disconnect();
+  }, []);
+  const A = /* @__PURE__ */ e(
+    z,
+    {
+      sections: m,
+      activeId: f,
+      collapsed: l,
+      label: x,
+      onNavigate: () => h(!1)
+    }
+  );
+  return (
+    /* THE ONE VIEWPORT UNIT. Everything below it is `flex-1` and `min-h-0`,
+       so no descendant — here or in a consumer's screen — ever has a reason to
+       name `dvh` or subtract a token from it. */
+    /* @__PURE__ */ e(q.Provider, { value: H, children: /* @__PURE__ */ r("div", { className: a("flex bg-canvas", s ? "h-dvh" : "min-h-dvh", O), children: [
+      /* @__PURE__ */ r(
+        "aside",
+        {
+          "data-collapsed": l || void 0,
+          className: a(
+            "group/sidebar hidden shrink-0 flex-col border-r border-border-subtle bg-surface lg:flex",
+            /* Bounded: nothing. A flex item in a row of a fixed height is
+               stretched to it by `align-items`, so the nav list's own
+               `min-h-0 flex-1 overflow-y-auto` engages with no viewport unit and
+               no stickiness. Unbounded: the row's height comes from its content,
+               so the aside has to state the viewport itself and stay put while
+               the page scrolls past it — the ONE place a second viewport unit is
+               unavoidable, and the reason it lives behind an opt-out. */
+            !s && "sticky top-0 h-dvh",
+            "transition-[var(--tx-colors),width] duration-(--dur-slow) ease-emphasis",
+            l ? "w-14" : "w-60"
+          ),
+          children: [
+            /* @__PURE__ */ r("div", { className: a("flex h-control-xl shrink-0 items-center gap-2 px-3", l && "justify-center"), children: [
+              !l && /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: n }),
+              /* @__PURE__ */ e(
+                u,
+                {
+                  label: l ? i.expandSidebar : i.collapseSidebar,
+                  tooltipSide: "right",
+                  onClick: () => W((c) => !c),
+                  icon: /* @__PURE__ */ e(
+                    p,
+                    {
+                      name: "panel-left",
+                      size: "sm",
+                      className: a("transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-base)", l && "rotate-180")
+                    }
+                  )
+                }
+              )
+            ] }),
+            l && d && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center justify-center px-3 pb-2", children: d }),
+            /* @__PURE__ */ e("div", { className: "relative min-h-0 flex-1 overflow-y-auto px-2 py-2", children: A }),
+            o && /* @__PURE__ */ e("div", { className: "shrink-0 border-t border-border-subtle p-2", children: o })
+          ]
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: a("flex min-w-0 flex-1 flex-col", s && "min-h-0"), children: [
+        /* @__PURE__ */ r(
+          "header",
+          {
+            ref: N,
+            className: a(
+              "z-(--z-sticky) flex h-control-xl shrink-0 items-center gap-3",
+              "border-b border-border-subtle bg-canvas/85 px-4 backdrop-blur-md",
+              /* FIXED BY STRUCTURE when the shell is bounded: the header sits
+                 OUTSIDE the scroller, so there is nothing for it to stick to.
+                 `sticky top-0` there would be a declaration that reads as intent
+                 and does nothing. */
+              !s && "sticky top-0"
+            ),
+            children: [
+              /* @__PURE__ */ r(t.Root, { open: E, onOpenChange: h, children: [
+                /* @__PURE__ */ e(
+                  t.Trigger,
+                  {
+                    render: (
+                      /* `hideTooltip` on every Base UI `render` slot in this file:
+                         the slot expects ONE element it can merge props and a ref
+                         into, and a tooltip wrapper would swallow both. The name
+                         still comes from `label` — that part is never optional. */
+                      /* @__PURE__ */ e(
+                        u,
+                        {
+                          label: i.openNavigation,
+                          hideTooltip: !0,
+                          className: "lg:hidden",
+                          style: { "--tap-target": "44px" },
+                          icon: /* @__PURE__ */ e(p, { name: "menu", size: "sm" })
+                        }
+                      )
+                    )
+                  }
+                ),
+                /* @__PURE__ */ r(t.Portal, { children: [
+                  /* @__PURE__ */ e(t.Backdrop, { className: U("lg:hidden") }),
+                  /* @__PURE__ */ r(
+                    t.Popup,
+                    {
+                      className: a(
+                        "fixed inset-y-0 left-0 z-(--z-drawer) flex w-72 flex-col",
+                        "border-r border-border bg-surface shadow-xl outline-none lg:hidden",
+                        /* Slides from the edge it lives on, so it reads as coming
+                           from off-screen rather than materialising in place. */
+                        "transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-slower) ease-emphasis",
+                        "data-starting-style:-translate-x-full data-ending-style:-translate-x-full"
+                      ),
+                      children: [
+                        /* @__PURE__ */ e(t.Title, { className: "sr-only", children: i.navigationTitle }),
+                        /* @__PURE__ */ r("div", { className: "flex h-control-xl shrink-0 items-center justify-between gap-2 px-3", children: [
+                          /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: n }),
+                          /* @__PURE__ */ e(
+                            t.Close,
+                            {
+                              render: /* @__PURE__ */ e(
+                                u,
+                                {
+                                  label: i.closeNavigation,
+                                  hideTooltip: !0,
+                                  icon: /* @__PURE__ */ e(p, { name: "x", size: "sm" })
+                                }
+                              )
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ e("div", { className: "relative min-h-0 flex-1 overflow-y-auto px-2 py-2", children: /* @__PURE__ */ e(
+                          z,
+                          {
+                            sections: m,
+                            activeId: f,
+                            collapsed: !1,
+                            label: x,
+                            onNavigate: () => h(!1)
+                          }
+                        ) }),
+                        o && /* @__PURE__ */ e("div", { className: "shrink-0 border-t border-border-subtle p-2", children: o })
+                      ]
+                    }
+                  )
+                ] })
+              ] }),
+              C
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          P,
+          {
+            ref: g,
+            "data-app-shell-content": "",
+            tabIndex: s ? 0 : -1,
+            className: a(
+              "flex min-w-0 flex-1 flex-col outline-none",
+              s && "relative min-h-0 overflow-y-auto focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-border"
+            ),
+            children: B
+          }
+        )
+      ] })
+    ] }) })
+  );
+}
+function z({
+  sections: n,
+  activeId: d,
+  collapsed: m,
+  label: f,
+  onNavigate: o
+}) {
+  return /* @__PURE__ */ e("nav", { "aria-label": f, className: "flex flex-col gap-4", children: /* @__PURE__ */ e(
+    V,
+    {
+      sections: n,
+      activeId: d,
+      collapsed: m,
+      onNavigate: o
+    }
+  ) });
+}
+export {
+  ae as AppShell
+};
+//# sourceMappingURL=AppShell.js.map